<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>拼团购物</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		.n-tabs {
			position: fixed;
			top:44px;
			left: 0;
			width: 100%;
			height: 41px;
			overflow: hidden;
			z-index: 1000;
			background-color: #fff;
			box-shadow: 0 0 2PX 0PX rgba(155,143,143,0.6);
			-webkit-box-shadow: 0 0 2PX 0PX rgba(155,143,143,0.6);
			-moz-box-shadow: 0 0 2PX 0PX rgba(155,143,143,0.6);
		}
		.n-tabs .edge {
			position: fixed;
			top: 0;
			height: 41px;
			width: 100%;
			border-bottom: 1px solid #e5e5e5;
		}
		.n-tabs .n-tabContainer {
			-webkit-overflow-scrolling: touch;
			position: relative;
			top: 0;
			left: 0;
			overflow-x: auto;
			overflow-y: hidden;
			padding-left: 16px;
			height: 51px;
			font-size: 14px;
			color: #333;
			white-space: nowrap;
		}
		.n-tabs .n-tabContainer .navtab {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
		}

		.n-tabs .n-tabContainer .n-tabItem {
			-webkit-box-flex: 1;
			-webkit-flex-grow: 1;
			flex-grow: 1;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			display: inline-block;
			height: 41px;
			line-height: 41px;
			text-align: center;
			margin-left: 20px;
		}
		.n-tabs .n-tabContainer .n-tabItem:first-child {
			margin-left: 0;
		}
		.n-tabs .n-tabContainer .n-tabItem .current {
			display: inline-block;
			height: 41px;
			border-bottom: 2px solid #e31436;
			color: #e31436;
		}
	</style>

</head>
<body style="background:#eee">

	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:void(0)" onclick="history.back(-1);" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear" style="width:70%;margin: 0 auto;">
			<div class="aui-header-center-logo">
				<div class="">拼团购物</div>
			</div>
		</div>
		<!--<a href="#" class="aui-header-item-icon"   style="min-width:0">-->
			<!--<i class="aui-icon aui-icon-search"></i>-->
		<!--</a>-->
	</header>
	<div id="vue">
	<!--<section class="n-tabs">-->
		<!--<ul class="n-tabContainer" id="auto-id-1509603311057">-->
			<!--<li class="n-tabItem" data-id="homepage">-->
				<!--<a href="#" id="homepage" class="current">精选</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="44114">-->
				<!--<a href="#" id="44114" class="">母婴</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="15394">-->
				<!--<a href="#" id="15394" class="">美妆</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="01436">-->
				<!--<a href="#" id="01436" class="">保健品</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="18211">-->
				<!--<a href="#" id="18211" class="">家居生活</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="83651">-->
				<!--<a href="#" id="83651" class="">生鲜</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="37957">-->
				<!--<a href="#" id="37957" class="">数码</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="74029">-->
				<!--<a href="#" id="74029" class="">个人洗护</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="73179">-->
				<!--<a href="#" id="73179" class="">海外直邮</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="41804">-->
				<!--<a href="#" id="41804" class="">服饰鞋靴</a>-->
			<!--</li>-->
		<!--</ul>-->
	<!--</section>-->
	<section class="aui-Purchase-content">
		<div class="aui-list-product-box aui-list-product-box-clear">
			<a style="padding: 10px 8px;height: 25em;" href="javascript:;" class="aui-list-product-item" v-for="item in productList" :key="item.ju_id" @click="goDetail(item)">
				<div class="aui-list-product-item-img" style="border-radius: 6px;height: 16em;">
					<img :src="item.pic_url_for_w_l" alt="">
					<!--<span class="aui-Purchase-tag">2人团</span>-->
				</div>
				<div class="aui-list-product-item-text">
					<h3 style="height: 3em;">{{item.title}}</h3>
					<div class="aui-list-product-mes-box">
						<div>
							<span class="aui-list-product-item-price">
								<em>¥</em>
								{{item.act_price}}元抢购
							</span>
<!--							<span class="aui-list-product-item-del-price">-->
<!--								¥{{item.orig_price}}-->
<!--							</span>-->
						</div>
						<!--<div class="aui-comment">已团134件</div>-->
					</div>
					<div class="aui-list-product-mes-box" style="margin-top: 10px;">
						<div style="border: 0.5px solid red;padding: 4px 3.99em;border-radius: 6px;">
								<span class="aui-list-product-item-price">
									<em>立即领取</em>
								</span>
						</div>
					</div>
				</div>
			</a>

		</div>
	</section>
</div>

	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" src="themes/vue2/vue.js"></script>
	<script type="text/javascript" src="themes/js/base.js"></script>
	<script type="text/javascript" >
        /**
         * Javascript API调用Tab
         */
        !function ($) {
            var $tab = $('#J_Tab');

            $tab.tab({
                nav: '.tab-nav-item',
                panel: '.tab-panel-item',
                activeClass: 'tab-active'
            });

			/*
			 $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
			 console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
			 });
			 */

            $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
            });
        }(jQuery);


        var vue = new Vue({
            el: '#vue',
            data: {
                productList:[],
                items: 1,
                b:true
            },
            created:function () {   //实例初始化创建完成执行
                this.getProductList();
                window.addEventListener('scroll', this.onScroll);
            },
            methods:{              //定义封装方法
                onScroll() {
                    //可滚动容器的高度
                    let innerHeight = document.querySelector('#vue').clientHeight;
                    //屏幕尺寸高度
                    let outerHeight = document.documentElement.clientHeight;
                    //可滚动容器超出当前窗口显示范围的高度
                    let scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                    //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
                    console.log(innerHeight + " " + outerHeight + " " + scrollTop);
                    if ((innerHeight-110) < (outerHeight + scrollTop)) {
                        if(!this.b){
                            return;
                        }
                        //加载更多操作
                        console.log("loadmore："+this.items);
                        this.items += 1;
                        this.b = false;
                        this.getProductList();
                    }
                },
                //获取列表
                getProductList:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:CTX+"/open/h5/tbk/getJhsProductList",
                        dataType:"JSON",
                        data:{
                            pageNo:self.items,
                            cid:'',  //类目编号
                            str:'' //搜索字段
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var list = self.productList;
                                var plist = data.data.ju_items_search_response.result.model_list.items;
                                var arrList = list.concat(plist);
                                self.productList = arrList;
                                self.b = true;
                            } else {

                            }
                        }
                    });
                },
                goDetail(item){

                    window.location.href = item.wap_url;

                }
            },
            watch:{     //监听器

            }

        })
	</script>

</body>
</html>